<!doctype html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>世界</title>
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
	<style>
		body{
			padding: 30px;
		}
		.box{
			position: relative;
			top: 0;
			left: 0;
			width: 80px;
			height: 80px;
			background: dodgerblue;
			margin-bottom: 40px;
		}
		button{
			margin-top: 40px;
		}
	</style>
</head>
<body>
	<div class="box"></div>

	<button id="action">action</button>
	<button onclick="live(1)">01</button>


<script src="js/jquery.min.js"></script>
<script src="js/velocity.min.js"></script>
<script>
	document.getElementById('action').addEventListener('click', function () {
		$('.box').velocity('stop');
// 回调
		$('.box').velocity({left:"500px"},1000,'spring',function(){
			$(this).css('background','red');
		});

// 详细设置
//		$('.box').velocity({left:"500px",rotateZ:90},{duration:600 ,easing:'ease-in-out',delay: 100,loop: true});
		$('.box').velocity('reverse');
	});

// 另一种写法
	$.Velocity({
		e:$('.box'),
		p:{left:'50px'},
		o:{easing:'linear'}
	});


	function live(id){
		switch(id){
			case 1:
				$('.box').velocity({translateY:'100px'},{loop:true});
				break;
		}
	}


	/* api {duration} 持续时间 slow 600,normal 400, fast 200*/
	/* ----------------------------
	*  api {easing} 缓动曲线 http://easings.net/zh-cn
	*  jq三角函数 css 弹簧物理
	*/
	/* api {delay} 延迟时间 */
	/* api {display} {visibility} 和css 的基本一致 */
	/* api 'reverse' 反转 */
	/* api 'scrolling' 滚动到指定的元素*{offset:'40px'}偏移 */
	/* api {color，backgroundColor, backgroundColorAlpha} 16进制 */
	/* ----------------------------
	*  api {transform} 变换
	*  translateX 移动
	*  rotateZ 2d转
	*  scaleX 尺寸
	*/


	/* 连续动画 */
	// $.Velocity.RunSequence(数组);

</script>
</body>
</html>